<template>
	<view class="container" :style="{background: `linear-gradient(to bottom, ${_temp_themeColor}, rgba(255,255,255,0) 700rpx)`}">
		<!-- <refresh-view :loading="refresher_show" :height="naviHeight"></refresh-view> -->
		<customHead
			title="余额"
			isShowBackArrow
			:titlePaddingLeft="30"
			:placeholder="true"
		>
		</customHead>
		<view class="main_content" v-if="naviHeight">
			<view class="balance_area">
				<view class="title">
					<text>可用余额</text>
				</view>
				<view class="number">
					<text>{{userInfo.balance}}</text>
				</view>
				<view class="recharge_box">
					<input class="input" type="digit" v-model="payMoney"/>
					<view class="info">元</view>
				</view>
				<button class="recharge_btn" :style="{background: lightColor}" @click="getRechargeOrder">充值</button>
			</view>
			<view class="balance_record">
				<view class="title" @click="gotoRecord">
					<view class="left">
						<text>余额变动明细</text>
					</view>
					<view class="right">
						<!-- <text>更多</text> -->
						<u-icon name="arrow-right" size="14"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { partnerAppletsWechatOrderPay } from "@/tools/request/api.js"
	import { makeContrast, makeLightColor } from '@/tools/utils/colorful.js'
	export default {
		data() {
			return {
				payMoney: '',
				payList: ''
			};
		},
		onLoad () {
			
		},
		computed: {
			lightColor () {
				let light_color = makeLightColor(this._temp_themeColor, 0.2);
				let linearBack = `linear-gradient( to right, ${this._temp_themeColor}, ${light_color})`;
				return linearBack;
			}
		},
		methods: {
			gotoRecord () {
				uni.navigateTo({
					url: '/subpack_my/balance/balanceRecord'
				})
			},
			getRechargeOrder() {
				let self = this;
				let postData = {
					"client": "小程序",
					"openId": self.openId,
					"payMoney": self.payMoney,
					"payWay": 1,
					"payType":2,
					"businessId":self.businessId
				}
				if(postData.payMoney==''){
					uni.showToast({
						title:'请输入充值金额',
						icon:'none'
					})
					return
				}
				// if(self.userInfo.mobile==0){
				// 	uni.showModal({
				// 		title: '充值提示',
				// 		content: '充值需要您点击授权按钮，获取手机号',
				// 		showCancel: false
				// 	})
				// 	return
				// }
				uni.showLoading({
					title: '支付准备中',
					mask: true
				});
				partnerAppletsWechatOrderPay(postData).then(res => {
					if (res.code === 200) {
						self.payList = res.body;
						let data = res.body;
						
						uni.hideLoading();
						self.time = Date.now();
						wx.requestPayment({
							'appId': self.payList.appid,
							'nonceStr': self.payList.noncestr,
							'package': self.payList.package,
							'signType': 'RSA',
							'timeStamp': self.payList.timestamp,
							'paySign':self.payList.sign,
							success: function(res) {
								uni.showToast({
									title: '微信支付成功'
								});
								self.payMoney = '';
								setTimeout(() => {
									self.getUserInfo();
								}, 2000)
							},
							fail: function(err) {
								self.cancelPay();
								uni.showModal({
									title: '支付失败',
									content: '订单支付失败，请重新进行支付。如对订单金额有疑问请联系客服人员',
									showCancel: false
								})
								return
							}
						});
					} else {
						uni.hideLoading();
						uni.showModal({
							title: '支付失败',
							content: res.msg,
							showCancel: false
						})
					}
				})
				
			},
		},
		// 下拉刷新
		onPullDownRefresh () {
			this.getUserInfo();
		},
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100vw;
		height: 100vh;
		// background: linear-gradient(to bottom, #01cb88, rgba(255,255,255,0) 700rpx);
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.main_content{
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			
			.balance_area{
				width: 100%;
				background-color: #fff;
				border-radius: 20rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				align-items: center;
				
				.title{
					width: 100%;
					padding: 30rpx;
					text-align: center;
				}
				.number{
					font-size: 60rpx;
					font-weight: bold;
				}
				.recharge_box{
					width: 100%;
					height: 80rpx;
					margin-top: 80rpx;
					margin-bottom: 40rpx;
					display: flex;
					align-items: center;
					border-radius: 10rpx;
					overflow: hidden;
					border: 1rpx solid #a2a2a2;
					
					.input{
						width: 85%;
						height: 100%;
						padding: 0 30rpx;
						box-sizing: border-box;
					}
					.info {
						width: 15%;
						height: 100%;
						color: #999;
						background-color: #e2e2e2;
						box-sizing: border-box;
						font-size: 28rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border-left: 1rpx solid #a2a2a2;
					}
				}
				.recharge_btn{
					width: 100%;
					height: 80rpx;
					padding: 0;
					// background: linear-gradient(to right, #00e196, #00c382);
					color: #fff;
					margin-top: 30rpx;
					margin-bottom: 40rpx;
				}
			}
			.balance_record{
				width: 100%;
				border-radius: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				
				
				.title{
					margin-top: 20rpx;
					width: 100%;
					padding: 30rpx 30rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					background-color: #fff;
					border-top-left-radius: 20rpx;
					border-top-right-radius: 20rpx;
					
					.right{
						display: flex;
						align-items: center;
					}
				}
				.list{
					width: 100%;
					background-color: #fff;
					border-bottom-left-radius: 20rpx;
					border-bottom-right-radius: 20rpx;
					
					.scroll{
						height: 800rpx;
						padding: 20rpx 0;
						box-sizing: border-box;
						
						.main{
							padding-bottom: 50rpx;
							
							.main_item{
								background-color: #fff;
								padding: 20rpx 20rpx;
								margin-top: 20rpx;
								display: flex;
								border-radius: 20rpx;
								
								.item_img{
									width: 100rpx;
									height: 100rpx;
								}
								.item_center{
									width: 53%;
									padding-left: 20rpx;
									margin-right: 20rpx;
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
									
									.title1{
										
									}
									.desc{
										font-size: 28rpx;
										color: #36363d;
									}
								}
								.item_right{
									font-size: 28rpx;
									color: #36363d;
								}
							}
						}
					}
				}
			}
			
			
		}
	}
</style>
